<template>
    <div>
        <div>
            <div class="in-header">
                <el-container>
                    <el-header class="title">{{ title }}</el-header>
                    <el-header class="zx-border">
                        <!--<span>专项类型</span>-->
                        <!--<span class="dy">{{ taskTypeName }}</span>-->
                        <span>承办人</span>
                        <span class="dy">{{ userName }}</span>
                        <span>交办领导</span>
                        <span class="dy">{{ leaderName }}</span>
                        <span>开始时间</span>
                        <span class="dy" formatter="dateFormat">{{createTime}}</span>
                        <span>计划完成时间</span>
                        <span class="dy" style="border-right: 0px">{{ planCompleteTime }}</span>
                    </el-header>
                    <el-container class="footer">
                        <el-aside width="85px" class="xm">说明</el-aside>
                        <el-main>{{ taskExplain }}</el-main>
                    </el-container>
                </el-container>
            </div>
            <div class="header-btn">
                <div></div>
                <div class="btn">
                    <el-button
                        class="edit"
                        type="primary"
                        @click="editTitle">编辑</el-button>
                    <el-button type="primary">关联信息</el-button>
                    <el-button type="primary" @click="goYiBan">确认完成</el-button>

                </div>
            </div>
        </div>
        <div class="line"></div>

        <div class="in-offPd">
            <template  v-for="(task, index) in taskData"
                       v-key="task.id">
                <div class="in-officeContent"  >
                    <div class="icon-y"></div>
                    <div class="item-text">
                        <div class="left">
                            <div class="btn-bl">{{task.appName}}</div>
                            <p>{{task.data | handleDate('time')}}</p>
                            <p>{{task.data | handleDate('date')}}</p>
                        </div>
                        <div class="text-border">
                            <div>
                                <div class="item">{{task.title}}</div>
                                <p class="">
                                    <span>承办人：{{task.userName}}</span>
                                    <!--<span style="margin-left: 30px">状态：处理中</span>-->
                                </p>
                                <!--<md-button class="md-raised" @click="getGreen(task)">展开</md-button>-->
                            </div>
                            <!--<div class="btn-wrap">-->
                                <!--<el-button  size="medium" round>下一步</el-button>-->
                                <!--<el-button  @click="editChildrenTitle" size="medium" round>编辑</el-button>-->
                            <!--</div>-->
                        </div>
                    </div>
                    <!--流程信息修改表单-->
                    <div style="height: 1px; overflow: hidden">
                        <form style="display: none;" id="edit-officeContent-form" class="layui-form" action="">
                            <input type="hidden" name="taskIndex" v-model="index"/>
                            <div class="layui-form-item">
                                <label class="layui-form-label">任务标题</label>
                                <div class="layui-input-block">
                                    <input type="text" name="title" required  lay-verify="required" placeholder="请输入任务标题" autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="edit-officeContent-form">立即提交</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>

                        </form>
                    </div>
                    <!--子节点-->
                    <template v-for="(data, index) in task.children"
                              v-key="index"
                              v-if="task.children.length > 0"
                    >
                        <div class="in-officeContent children"  >
                            <div class="icon-y"></div>
                            <div class="item-text">
                                <div class="left">
                                    <div class="btn-bl">{{data.appName}}</div>
                                    <p>{{data.data | handleDate('time')}}</p>
                                    <p>{{data.data | handleDate('date')}}</p>
                                    <!--<div class="zz">相关工作</div>-->
                                </div>
                                <div class="text-border">
                                    <div>
                                        <div class="item" style="width: 100%">{{data.title}}</div>
                                        <div class="clearfix"></div>
                                        <p class=""><span>承办人：{{data.userName}}</span> <span style="margin-left: 30px">状态：处理中</span></p>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </template>
                    <!--子节点-->

                </div>

            </template>
            <!--跳转中间项-->
            <el-button @click="next" class="next-btn" type="primary">下一步流程</el-button>
            <!--<button @click="next" type="button"-->
                    <!--class="el-button next-btn el-button&#45;&#45;primary el-button&#45;&#45;small"-->
            <!--&gt;-->
                <!--<span><a target="_blank"-->
                    <!--:href="'http://20.0.101.154:8081/static/index.html?'-->
                          <!--+'appId='+taskData[taskData.length-1].appId-->
                          <!--+'&key='+taskData[taskData.length-1].key-->
                          <!--+'&recordId='+taskData[taskData.length-1].recordId-->
                          <!--+'&operationId='+taskData[taskData.length-1].taskId-->
                          <!--+'&token='+urlToken-->
                          <!--+'&title='+taskData[taskData.length-1].title-->
                            <!--"-->
                <!--&gt;-->
                    <!--下一步流程</a>-->
                <!--</span>-->
            <!--</button>-->
        </div>

        <!--下一步底部按钮-->
        <!--<div class="footer-btn">下一步流程</div>-->

        <!--layui的表单模块，用于layui的弹出层-->
        <div style="height: 1px; overflow: hidden;">
            <!--任务表单-->
            <form style="display: none;" id="edit-title-form" class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">任务名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="taskName" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">任务说明</label>
                    <div class="layui-input-block">
                        <input type="text" name="taskExplain" required  lay-verify="required" placeholder="请输入说明文字" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">计划完成时间</label>
                    <div class="layui-input-block">
                        <!--layui日期选择器渲染元素-->
                        <input type="text" name="planCompleteTime" class="layui-input" id="date">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="edit-title-form">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>

            </form>

        </div>

    </div>

</template>

<script>
    import ht from '../../components/common/address'
    import get from '../../components/common/getUrl'

    export default {
        name: "InOfficeDetail01",
        data(){
            return{
                urlId:'',
                urlToken:'',
                Token:'',
                tkID:'',
                recordId: '',
                taskType:'',
                title:'',
                taskExplain:'',
                userName: '',
                leaderName:'',
                planCompleteTime:'',
                taskTypeName:'',
                createTime:'',
                taskData: [],
                son:[],
                beginDate:'',
                endDate:"",
                i:'',
                test: {},//测试数据
            }
        },
        filters: {
            /*后台传过来的日期数据有时为2018-12-24 12:00:00，根据空格分割
            有时为2018-12-22T21:07:38.000+0000,需去掉其中的T和秒数后面的数字*/
            handleDate: function (value, type) {
                var date, time //date: 返回日期  time：返回时间
                //先查看T是否存在
                if(value.indexOf('T') > 0){
                    var arr1 =  value.split('T')
                    date = arr1[0]
                    var arr2 = arr1[1].split('.')
                    time = arr2[0]
                } else {
                  var arr = value.split(' ')
                  date = arr[0]
                  time = arr[1]
                }
                //根据请求的类型返回日期或者时间
                return type == 'date' ? date : time
            }
        },
        methods:{

            getUrl(){
                // this.Token = localStorage.getItem('token');
                // console.log('ww',this.urlId);
                this.$http({
                    method:'GET',
                    url:ht.Address + "personal/task/getByTaskId?taskId="+ this.urlId +""
                    ,headers:{
                        "Authorization":this.urlToken
                    },
                })
                    .then( (response)=> {
                        console.log(response.data.data);
                        this.title = response.data.data.taskName;
                        this.taskExplain = response.data.data.taskExplain;
                        this.userName = response.data.data.userName;
                        this.leaderName = response.data.data.leaderName;
                        // this.planCompleteTime = response.data.data.planCompleteTime;
                        this.planCompleteTime = response.data.data.endDate;
                        this.taskTypeName = response.data.data.taskTypeName;
                        this.taskType = response.data.data;
                        // this.arr=response.data.data.createTime
                        this.createTime =  response.data.data.beginDate;
                        console.log(this.createTime);
                    }).catch( (error)=> {
                        this.title = "数据获取失败";
                    console.log(error)
                })
            },

            getDetail(){
                this.tkID = this.$route.query.id;
                if (this.tkID) {
                    this.tkID=this.urlId;
                }
                // console.log('ww',this.tkID);
                this.Token = localStorage.getItem('token');
                this.$http({
                    method:'GET',
                    url:ht.Address + "personal/task/getByTaskId?taskId="+ this.tkID +""
                    ,headers:{
                        "Authorization":this.Token
                    },
                })
                    .then( (response)=> {
                        // console.log(response.data.data);
                        this.title = response.data.data.taskName;
                        this.taskExplain = response.data.data.taskExplain;
                        this.userName = response.data.data.userName;
                        this.leaderName = response.data.data.leaderName;
                        this.planCompleteTime = response.data.data.endDate;
                        this.taskTypeName = response.data.data.taskTypeName;
                        this.createTime =  response.data.data.beginDate;
                        this.recordId = response.data.data.recordId
                        this.taskType = response.data.data;
                    }).catch( (error)=> {
                    this.title = "数据获取失败";
                        console.log(error)
                })
            },

            getTaskData(){
                this.tkID = this.$route.query.id;
                // console.log('ww',this.tkID);
                this.Token = localStorage.getItem('token');
                this.$http({
                    method:'GET',
                    url:ht.Address + "personal/task/findRelationByTaskId?taskid="+ this.tkID
                    ,headers:{
                        "Authorization":this.Token
                    },
                }).then( (response)=> {
                        this.taskData=response.data.data;
                        // console.log('这里有子节点循环');
                        // for(let item in this.taskData) {
                        //
                        //     if (this.taskData[item].type ==1) {
                        //         var dataArr = [] //存储子节点的数组
                        //         this.$http({
                        //             method:'GET',
                        //             url:ht.Address + "personal/task/findRelationByRecordId?recordid="+ this.taskData[item].recordId
                        //             ,headers:{
                        //                 "Authorization":this.Token
                        //             },
                        //         }).then( (res2)=> {
                        //                 //获取子节点数据
                        //                 dataArr.push(res2.data.data)
                        //                 this.$set(this.taskData[item], 'children', dataArr) //vue不能检测数组的更新，需要使用$set进行更新
                        //             }).catch( (error)=> {
                        //             console.log(error)
                        //         })
                        //     }
                        // }
                    }).catch( (error)=> {
                    console.log(error)
                })
            },
            goYiBan(){
                this.tkID = this.$route.query.id;
                // console.log('ww',this.tkID);
                this.Token = localStorage.getItem('token');
                this.$http({
                    method:'GET',
                    url:ht.Address + "personal/task/setDoneByTaskId?taskId="+ this.tkID
                    ,headers:{
                        "Authorization":this.Token
                    },
                })
                    .then( (response)=> {
                        // console.log('sdfasdfds',response.data.code);
                        // console.log('sdfasdfds',this.$route.query.id);
                        if (response.data.code==200){
                            this.$router.push({
                                path:'/yibanjie01',
                                query:{
                                    id:this.$route.query.id
                                }
                            });
                        }
                    }).catch( (error)=> {
                    console.log(error)
                })
            },
            getNoteData(){
                this.tkID = this.$route.query.id;
                // console.log('ww',this.tkID);
                this.Token = localStorage.getItem('token');
                this.$http({
                    method:'GET',
                    url:ht.Address + "personal/task/findRelationByRecordId?recordid="+ this.tkID
                    ,headers:{
                        "Authorization":this.Token
                    },
                })
                    .then( (response)=> {
                        // console.log(response.data.data);
                        this.taskData=response.data.data;
                        // console.log('这里有子getNoteData节点循环',response.data.data[0].type);
                    }).catch( (error)=> {
                    console.log(error)
                })
            },
            login(){
                this.$http({
                    method:'GET'
                    ,url:ht.loginAddress + "gxzfsession/test/getFlog"
                    ,headers:{
                        "Accept": "application/json;charset=UTF-8",
                                                                                                                                                                              "Authorization":this.urlToken
                    },
                })
                    .then( (res)=> {
                        localStorage.setItem('token',this.urlToken);
                        localStorage.setItem('username',res.data.data.username);
                        localStorage.setItem('userid',res.data.data.userid);
                        localStorage.setItem('unitid',res.data.data.unitid);
                        // localStorage.setItem('unitname',res.data.data.unitname);
                        console.log('username:',localStorage.getItem("userid"));
                        // this.$router.push('/zaiban');
                     }).catch( (err)=> {
                    console.log(err.msg);
                })
            },

            //修改顶部任务名称和说明文字
            editTitle() {
                var _this = this //存储vue实例
                layui.use(['layer', 'form', 'laydate'], function(){
                    var layer = layui.layer
                        ,form = layui.form
                        ,laydate = layui.laydate;

                    //打开弹窗
                    layer.open({
                        type: 1,
                        title: '修改信息',
                        content: $('#edit-title-form'),
                        area: '600px'
                    })
                    //渲染日期选择器
                    laydate.render({
                        elem: '#date', //指定元素
                        type: 'datetime',
                        format: 'yyyy-MM-dd HH:mm:ss',
                        theme: '#4378ef',
                    });

                    form.on('submit(edit-title-form)', function(data){
                        //传输数据给后台进行修改

                        var params = {
                            taskId: _this.tkID,
                            taskName: data.field.taskName,
                            taskExplain: data.field.taskExplain,
                            planCompleteTime: data.field.planCompleteTime,
                        }

                        _this.$http({
                            method:'post',
                            url:ht.Address + "personal/task/updateWorkTaskByRecordId",
                            dataType:'jsonp',
                            params: params,
                            headers: {
                                'Content-Type':'application/x-www-form-urlencoded;charset=utf-8',
                                'Authorization': _this.Token
                            },
                            emulateJSON: true,
                        }).then((res) => {
                            //更新vue数据
                            _this.taskName = params.taskName
                            _this.taskExplain = params.taskExplain
                            _this.planCompleteTime = params.planCompleteTime

                            //关闭弹出层
                            layer.close(layer.index)
                            layer.msg('修改成功!')
                            return false
                        })

                        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                    });

                });

            },

            //修改任务流程的标题
            editChildrenTitle() {
                var _this = this //存储vue实例
                layui.use(['layer', 'form', 'laydate'], function(){
                    var layer = layui.layer
                        ,form = layui.form
                        ,laydate = layui.laydate;

                    //打开弹窗
                    layer.open({
                        type: 1,
                        title: '修改信息',
                        content: $('#edit-officeContent-form'),
                        area: '600px'
                    })
                    form.on('submit(edit-officeContent-form)', function(data){
                        //传输数据给后台进行修改

                        var params = {
                            taskId: _this.tkID,
                            taskName: data.field.title,
                            // taskExplain: data.field.taskExplain,
                            // planCompleteTime: data.field.planCompleteTime,
                        }

                        _this.$http({
                            method:'post',
                            url:ht.Address + "personal/task/updateWorkTaskByRecordId",
                            dataType:'jsonp',
                            params: params,
                            headers: {
                                'Content-Type':'application/x-www-form-urlencoded;charset=utf-8',
                                'Authorization': _this.Token
                            },
                            emulateJSON: true,
                        }).then((res) => {
                            //更新vue数据
                            _this.taskData[data.field.taskIndex].title = data.field.title
                            //关闭弹出层
                            layer.close(layer.index)
                            layer.msg('修改成功!')
                            return false
                        })

                        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                    });

                });
            },

            //下一步流程跳转中间页综合专项
            next() {
                var appId, key, recordId, operationId, token, title
                if(!this.taskData) {
                    //如果不存在子流程，就用固定的参数
                    appId = 'bdba07960da7410c94e010dc8cf0b3bc'
                    key = '2b9c0fd30cf14e2fad1f9cb8e1ac7c12'
                    recordId = this.recordId
                    operationId = this.tkID
                    token = localStorage.getItem('token')
                    title = this.title
                } else {
                    //有子流程就用最后一个子流程的数据作为参数
                    appId = this.taskData[this.taskData.length-1].appId
                    key = this.taskData[this.taskData.length-1].key
                    recordId = this.taskData[this.taskData.length-1].recordId
                    operationId = this.taskData[this.taskData.length-1].taskId
                    token = localStorage.getItem('token')
                    title = this.taskData[this.taskData.length-1].title

                }
                //打开新页面
                window.open(`http://20.0.101.154:8081/static/index.html?appId=${appId}&key=${key}&recordId=${recordId}&operationId=${operationId}&token=${token}&title=${title}&flag=1`)
            }
        },

        created() {
            this.urlId = get.getUrlKey('id');
            this.urlToken =  get.getUrlKey('sessionid');
            // console.log('urlId:',this.urlId);
            if (this.urlToken){
                // console.log('url传参');
                // localStorage.setItem('token',this.urlToken);
                this.login();
                // this.$router.go(0);
                this.getUrl();
                this.getTaskData();
            }else {
                this.getDetail();
                this.getTaskData();
            }
        //

        },
        mounted() {
           this.$forceUpdate() //主动让vue全部更新渲染
        }


    }
</script>

<style scoped>
    a {
        color:#FFF;
    }
    a:hover {
        color:#FFF;
    }
    .clearfix {
        clear: both;
    }
    .el-button--primary{
        width: 128px!important;
        height: 45px!important;
        background-color: #4378ef!important;
        border-radius: 10px;
        font-size: 20px;
    }
    .footer-btn{
        cursor: pointer;
        background-color: #4378ef;
        position: absolute;
        bottom: 20px;
        right: 50px;
        color: #fff;
        width: 166px;
        height: 54px;
        text-align: center;
        line-height: 50px;
        border-radius: 10px;
        font-size: 20px;
    }
    .zz{
        cursor: pointer;
        border: 1px solid #6392FC;
        border-radius: 50px;
        color: #6392FC;
        /*padding: 5px 15px;*/
        text-align: center;
        width: 100px;
        height: 30px;
        line-height: 30px;
    }
    .cbr{
        margin-top: 10px;
        color: #2f4050;
    }
    .left{
        font-size: 12px;
        padding-right: 10px;
        margin-top: -5px;
        color: #2f4050;
    }
    .left>p{
        text-align: center;
    }
    .btn-bl{
        margin-top: 10px;
        font-size: 18px;
        width: 150px;
        padding: 5px 0;
        text-align: center;
        background-color: #6392fc;
        color: #fff;
    }
    .in-offPd{
        font-size: 18px;
        padding-bottom: 150px;
        padding-top: 20px;
        padding-right: 20px;
    }
    .icon-y{
        position: absolute;
        top: 0px;
        left: 0px;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        border: 2px solid #6290FB;
    }
    body .children {
        margin-left: 6%;
    }
    .children .icon-y {
        border-color: #40BFA4;
    }
    .children .btn-bl {
        background-color: #40BFA4;
    }

    .item-text{
        position: relative;
        margin-left: 30px;
        display: flex;
    }
    .text-border{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-top: -10px;
        border: 1px solid #c6c6c6;
        border-radius: 7px;
        padding: 15px 20px 15px 10px;

    }
    .text-border .btn-wrap button {
        color: #FC894C;
        border-color: #FC894C;
    }
    .text-border .btn-wrap button:hover {
        background-color: #FFF;
    }
    .text-border .btn-wrap button:focus {
        background-color: #FFF;
    }
    .text-border .item {
        margin-bottom: 10px;
    }
    .text-border01{
        /*width: 100%;*/
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        border: 1px solid #c6c6c6;
        border-radius: 7px;
        padding: 15px 20px 15px 10px;
    }
    .in-officeContent:before{
        content: "";
        position: absolute;
        top: 19px;
        left: 7.5px;
        width: 2px;
        height: 100%;
        background-color: #ADADAD;
    }
    .children:before {
        height: 80%;
    }
    .item-text01{
        position: relative;
        margin-left: 30px;
    }
    .item-text01:before{
        content: "";
        position: absolute;
        top: 19px;
        left: -22.5px;
        width: 2px;
        height: 100%;
        background-color: #ADADAD;
    }
    .item-text01>p{
        color: #2f4050;
    }
    .in-officeContent{
        margin-top: 19px;
        margin-left: 20px;
        /*display: flex;*/
        position: relative;
    }
    .line{
        width: 100%;
        height: 10px;
        background-color: rgba(198, 198, 198,0.5);
    }
    .header-btn{
        display: flex;
        justify-content: space-between;
        margin-right: 20px;
        margin-bottom: 20px;
    }
    .el-button--mini, .el-button--small{
        width: 80px;
    }
    .in-header{
        border: 1px solid #bfbfbf;
        margin: 20px;
    }
    .title{
        border-bottom: 1px solid #bfbfbf;
        height: 54px!important;
        line-height: 54px;
        font-size: 30px;
        color: #2f4050;
        font-weight: normal;
        font-stretch: normal;
    }
    .zx-border{
        color: #808080;
        font-size: 18px;
        height: 40px!important;
        padding: 0;
        display: flex;
    }
    .zx-border>span{
        display: flex;
        align-items: center;
        text-align: center;
        padding: 0 10px;
        height: 100%;
        border-right: 1px solid #bfbfbf;;
        color: #8c8c8c;
    }
    .dy{
        color: #2f4050!important;
    }
    .footer{
        color: #8c8c8c;
        border-top: 1px solid #bfbfbf;
    }
    .xm{
        font-size: 18px;
        text-align: center;
        line-height: 61px;
        width: 93px!important;
        border-right: 1px solid #bfbfbf;
    }
    .next-btn {
        float: right;
        margin-top: 20px;
    }
    /*修改layui的尺寸*/
    .layui-btn[lay-submit] {
        background-color: #4378ef;
    }
    .layui-form-label {
        text-align: center;
    }
</style>
